<template>
    <div class="type-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
            <el-breadcrumb-item>
                article management
            </el-breadcrumb-item>
            <el-breadcrumb-item>type manager</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="btn">
            <el-button color="#626aef" :dark="isDark" @click="addArtType">添加类型</el-button>
            <el-button type="danger" :dark="isDark">批量删除类型</el-button>
        </div>
        <div class="tab">
            <el-table :data="tableTypeData" style="width: 100%;padding: 20px">
                <el-table-column label="序号" type="index" width="100" />
                <el-table-column label="类型名称" prop="typeName" width="250" />
                <el-table-column label="操作人" prop="planetUpdateUser" width="250" />
                <el-table-column label="操作时间" prop="planetUpdateTime" width="400" />
                <el-table-column align="right" width="300">
                    <template #header>
                        <el-input v-model="search" size="big" placeholder="请输入名称搜索" />
                    </template>
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                        >Edit</el-button
                        >
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >Delete</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="addDialogFormVisible" >
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass">添加分类</h4>
                    <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                        关闭
                    </el-button>
                </div>
            </template>
            <!-- <el-form onsubmit.prevent="false"> -->
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="typeName" autocomplete="off" />
                </el-form-item>
                <!-- <el-form-item label="Zones" :label-width="formLabelWidth">
                    <el-select v-model="typeName" placeholder="Please select a zone">
                        <el-option label="Zone No.1" value="shanghai" />
                        <el-option label="Zone No.2" value="beijing" />
                    </el-select>
                </el-form-item> -->
            <!-- </el-form> -->
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="addDialogFormVisible = false;typeName = '' ">取消</el-button>
                <el-button type="primary" @click="confirmAddType">
                    点击添加
                </el-button>
            </span>
            </template>
        </el-dialog>
        <div class="page">
            <!--                 :background="background" -->
            <el-pagination
                background
                v-model:current-page="typeDto.page"
                v-model:page-size="typeDto.size"
                :page-sizes="[20, 30, 40]"
                :small="small"
                :disabled="disabled"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>
import { useDark } from '@vueuse/core'
import { $http } from "@/utils/axios";
import { onMounted, reactive, ref, computed } from "vue";
import { gatewayPrefix,userMiddleContextPath } from '@/utils/commConstance'
import { ElMessage,ElNotification  } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
onMounted(()=>{
    getArtTypeList()
})
const getArtTypeList = ()=>{
    $http.post(`${gatewayPrefix}/${userMiddleContextPath}/articleOperate/getAllArtTypesByPage`,typeDto).then(res=>{
        tableTypeData = res.artVos
        total.value = res.totals
    })
}
const confirmAddType = ()=>{
    if(typeName.value == null || typeName.value == ''){
        return ElMessage.warning('请填写分类名称')
    }
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/articleOperate/addArtTypes?typeName=${typeName.value}`).then(res=>{
        console.log('add res:'+ res);
        ElMessage.success('添加成功')
        getArtTypeList()
        addDialogFormVisible.value = false
    }).catch(err =>{
        ElMessage.error(err.response.data.msg || '添加失败')
    })
}
let total = ref(0)
let addDialogFormVisible = ref(false)
const formLabelWidth = '140px'
let tableTypeData = reactive([])
const typeDto = reactive({
    "typeName": '',
    "page": 1,
    "size": 20
})
let typeName = ref('')
const isDark = ref(useDark())
//搜索
const search = ref('')
const filterTableData = computed(() =>
    tableTypeData.filter(
        (data) =>
            !search.value ||
            data.typeName.toLowerCase().includes(search.value.toLowerCase())
    )
)
const handleEdit = (index, row) => {
    console.log(index, row)
}
const handleDelete = (index, row) => {
    console.log(index, row)
}
const addArtType = ()=>{
    addDialogFormVisible.value = true
}
</script>

<style scoped>
.type-box .btn{
    margin-top: 20px;
}
.type-box .tab{
    margin-top: 20px;
    height: 60%;
    overflow-y: scroll;
}
.type-box .page{
    margin-top: 20px;
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

</style>